<template>
  <div style="height: 100%">
    <el-row :gutter="10" style="height: 100%">
      <el-col :span="16" style="height: 100%">
        <el-card style="height: 100%">
          <div slot="header">
            <span>待审核订单</span>
            <el-button
              size="small"
              type="text"
              style="float: right; text-decoration: underline"
              @click="goPendingOrderReview"
              >更多</el-button
            >
          </div>
          <hmi-table
            :table-data="awaitingData"
            :is-pagination-show="true"
            :table-height="'calc(100vh - 270px)'"
            :table-head="true"
            :total="pendingTotal"
            :current-page="queryForm.current"
            :page-size="queryForm.page"
            index-tyle="index"
            @handle-size-change="handleSizeChange"
            @handle-current-change="handleCurrentChange"
          >
            <template slot="TableHead">
              <el-form
                ref="queryForm"
                :model="queryForm"
                inline
                label-width="90px"
              >
                <el-form-item label="钢种" prop="steelGradeId">
                  <el-select
                    v-model="queryForm.steelGradeId"
                    placeholder="请选择钢种"
                    style="width: 10vw"
                    filterable
                    allow-create
                    default-first-option
                    clearable
                  >
                    <el-option
                      v-for="item in steelGradeList"
                      :key="item.id"
                      :value="item.steelGradeName"
                      :label="item.steelGradeName"
                    />
                  </el-select>
                </el-form-item>

                <!-- 顾客名称 -->
                <el-form-item label="顾客名称" prop="customerName">
                  <el-select
                    v-model="queryForm.customerName"
                    filterable
                    placeholder="请输入顾客名称"
                    allow-create
                    default-first-option
                    clearable
                    style="width: 10vw"
                  >
                    <el-option
                      v-for="item in customerList"
                      :key="item.id"
                      :label="item.customerName"
                      :value="item.customerName"
                    >
                  </el-option>
                </el-select>
                </el-form-item>

                <!-- 钢类 -->
                <el-form-item label="钢类" prop="steelTypeId">
                  <el-select
                    v-model="queryForm.steelTypeId"
                    placeholder="请选择钢类"
                    style="width: 10vw"
                    clearable
                  >
                  <el-option v-for="item in steelTypes" :key="item.id" :value="item.steelTypeName" :label="item.steelTypeName" />
                  </el-select>
                </el-form-item>
                <el-row>
                  <!-- 审核类型 -->
                  <el-form-item label="审核类型" prop="reviewType">
                    <el-select
                      v-model="queryForm.reviewType"
                      placeholder="请选择审核类型"
                      style="width: 10vw"
                      clearable
                    >
                      <el-option v-for="item in reviewTypes" :key="item.id" :value="item.reviewType" :label="item.reviewType" />
                    </el-select>
                  </el-form-item>

                  <!-- 编号 -->
                  <el-form-item label="编号" prop="code">
                    <el-input
                      v-model="queryForm.code"
                      placeholder="请输入编号"
                      clearable
                      style="width: 10vw"
                    ></el-input>
                  </el-form-item>
                  <el-form-item style="margin-left: 50px">
                    <el-button
                      type="primary"
                      size="mini"
                      @click="getPendingOrders()"
                      >查询</el-button
                    >
                    <el-button type="success" size="mini" @click="handleReset"
                      >重置</el-button
                    >
                  </el-form-item>
                </el-row>
              </el-form>
            </template>
            <template slot="TableBody">
              <!-- 序号 -->
              <el-table-column
                prop="index"
                label="序号"
                width="50"
                align="center"
                type="index"
              >
              </el-table-column>

              <!-- 编号 -->
              <el-table-column
                prop="code"
                label="编号"
                width="100"
                align="center"
              >
              </el-table-column>

              <!-- 审核类型 -->
              <el-table-column
                prop="reviewType"
                label="审核类型"
                width="150"
                align="center"
              >
              </el-table-column>

              <!-- 顾客名称 -->
              <el-table-column
                prop="customerName"
                label="顾客名称"
                align="center"
              >
              </el-table-column>

              <!-- 顾客联系方式 -->
              <el-table-column
                prop="customerPhone"
                label="顾客联系方式"
                align="center"
              >
              </el-table-column>

              <!-- 钢类 -->
              <el-table-column
                prop="steelTypeName"
                label="钢类"
                align="center"
              ></el-table-column>

              <!-- 钢种 -->
              <el-table-column prop="steelGradeName" label="钢种" align="center" show-overflow-tooltip></el-table-column>

              <!-- 规格 -->
              <el-table-column
                prop="specification"
                label="规格"
                width="100"
                align="center"
              >
              </el-table-column>

              <!-- 数量 -->
              <el-table-column prop="steelNumber" label="数量" align="center">
                <template slot-scope="scope">
                  {{ scope.row.steelNumber }}{{ scope.row.steelNumberUnit }}
                </template>
              </el-table-column>

              <!-- 交货状态 -->
              <el-table-column
                prop="deliveryStatus"
                label="交货状态"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>

              <!-- 加工用途 -->
              <el-table-column
                prop="processingPurpose"
                label="加工用途"
                align="center"
              >
              </el-table-column>

              <!-- 操作 -->
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleEdit(scope.row)"
                    >处理</el-button
                  >
                </template>
              </el-table-column>
            </template>
          </hmi-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="height: 50%">
          <div slot="header">
            <span>已审核订单</span>
            <el-button
              size="small"
              type="text"
              style="float: right; text-decoration: underline"
              @click="goApprovedOrder"
              >更多</el-button
            >
          </div>
          <hmi-table
            :table-data="verifiedData"
            :is-pagination-show="true"
            :table-height="'calc(100vh - 500px)'"
            :table-head="true"
            :total="reviewedOrderTotal"
            :current-page="reviewedOrderForm.current"
            :page-size="reviewedOrderForm.page"
            index-tyle="index"
            @handle-size-change="reviewedOrderHandleSizeChange"
            @handle-current-change="reviewedOrderHandleCurrentChange"
          >
            <template slot="TableBody">
              <!-- 序号 -->
              <el-table-column
                label="序号"
                width="60"
                align="center"
                type="index"
              >
              </el-table-column>

              <!-- 顾客名称 -->
              <el-table-column
                prop="customerName"
                label="顾客名称"
                width="180"
                align="center"
              >
              </el-table-column>

              <!-- 钢种 -->
              <el-table-column prop="steelGradeName" label="钢种" align="center" show-overflow-tooltip></el-table-column>
              <!-- 时间 -->
              <el-table-column
                prop="submitTime"
                label="时间"
                width="130"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{ formatterTime(scope.row.submitTime) }}</span>
                </template>
              </el-table-column>

              <!-- 分发部门 -->
              <el-table-column
                prop="department"
                label="分发部门"
                width="100"
                align="center"
              >
              </el-table-column>

              <!-- 详情 -->
              <el-table-column label="详情" width="70" align="center">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleDetail(scope.row)"
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </template>
          </hmi-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import HmiTable from "@/components/HmiTable.vue";
import { timeChange } from "@/lib/FormatTime";
import {
  GET_STANDARD_PENDINGORDER,
  GET_STANDARD_HISTORYORDER,
  GET_STEELGRADELIST,
  GET_STEELTYPELIST,
  GET_CUSTOMERNAMELIST,
  GET_REVIEWTYPE
} from "@/lib/Api.js";
import { post, get } from "@/lib/Util.js";
export default {
  components: {
    HmiTable
  },
  data() {
    return {
      queryForm: {
        current: 1,
        page: 5
      },
      /* 设置总记录数 */
      pendingTotal: 0,
      /* 设置分页数据 */
      awaitingData: [],
      reviewedOrderForm: {
        page: 5,
        current: 1
      },
      reviewedOrderTotal: 0,
      /* 设置分页数据 */
      verifiedData: [],
      steelGradeList: [],
      steelTypes: [],
      customerList: [],
      reviewTypes: []
    };
  },
  mounted() {
    this.getPendingOrders(); // 组件挂载后立即执行
    this.getReviewedOrder();
    this.getSteelGradeName();
    this.getsteelTypeNames();
    this.getCustomerNames();
    this.getreviewTypes();
  },
  methods: {
    formatterTime(time) {
      if (time !== "" && time !== undefined) {
        return timeChange(time);
      } else {
        return "";
      }
    },
    getSteelGradeName() {
      post(GET_STEELGRADELIST, { steelGradeName: "" }).then(resp => {
        this.steelGradeList = resp.data;
      });
    },
    getPendingOrders() {
      post(GET_STANDARD_PENDINGORDER, this.queryForm).then(resp => {
        const { total, rows } = resp;
        this.pendingTotal = total;
        this.awaitingData = rows;
      });
    },
    handleCurrentChange(current) {
      this.queryForm.current = current;
      this.getPendingOrders();
    },
    handleSizeChange(page) {
      this.queryForm.page = page;
      this.handleCurrentChange(1);
    },

    getReviewedOrder() {
      post(GET_STANDARD_HISTORYORDER, this.reviewedOrderForm).then(resp => {
        const { total, rows } = resp;
        this.reviewedOrderTotal = total;
        this.verifiedData = rows;
      });
    },

    reviewedOrderHandleCurrentChange(current) {
      this.reviewedOrderForm.current = current;
      this.getReviewedOrder();
    },
    reviewedOrderHandleSizeChange(page) {
      this.reviewedOrderForm.page = page;
      this.reviewedOrderHandleCurrentChange(1);
    },
    handleDetail(row) {
      this.$router.push({
        name: "standard-approvedOrder-infoCompliance",
        params: {
          id: row.id
        }
      });
    },
    handleEdit(row) {
      if (row.reviewType == "评审信息规范性") {
        this.$router.push({
          name: "standard-pendingOrderReview-informationStandardization",
          params: { id: row.id }
        });
      } else {
        // 调用 Vuex action 来更新共享参数
        this.$store.dispatch("updateShareId", row.id);
        this.$router.push({
          name: "standard-pendingOrderReview-informationCompliance"
        });
      }
    },
    //重置表单
    handleReset() {
      this.$refs.queryForm.resetFields();
      this.getPendingOrders();
    },
    goPendingOrderReview() {
      this.$router.push({
        path: "/standard/pendingOrderReview"
      });
    },
    goApprovedOrder() {
      this.$router.push({
        path: "/standard/approvedOrder"
      });
    },
    // 获取顾客
    getCustomerNames() {
      post(GET_CUSTOMERNAMELIST, { customerName: "" }).then(resp => {
        this.customerList = resp.data;
      });
    },
    getreviewTypes() {
      get(GET_REVIEWTYPE).then(resp => {
        this.reviewTypes = resp.data;
      });
    },
    // 获取钢类
    getsteelTypeNames() {
      post(GET_STEELTYPELIST, { steelTypeName: "" }).then(resp => {
        this.steelTypes = resp.data;
      });
    }
  }
};
</script>

<style scoped>
.serch-filter {
  display: flex;
  justify-content: space-evenly;
}
</style>
